﻿@namespace BlazorDemo.Pages.CaseViews
@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2><DemoNavLink Link="TagBox#ItemValues" />Item Values</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2">TagBox</a> component provides access to item values.
        The value is assigned to the editor's edit value when a user selects an item from the drop-down list.
        To enable this access, set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2.ValueFieldName">ValueFieldName</a> property to the name of the data source field that ships with values for the TagBox items.
    </p>
    <p>
        If the <b>ValueFieldName</b> property is not specified, the TagBox component searches for a <b>Value</b> field in the data source and uses this field as a value field.
        Otherwise, values are not assigned to editor items.
    </p>
    <p>
        To access values of the selected items, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2.Values">Values</a> property.
        To track selection changes, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2.ValuesChanged">ValuesChanged</a> event or two-way synchronization as demonstrated in this module.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode">
            <TitleTemplate>
                Selected values: {
                    @GetStringRepresentation()
                }
            </TitleTemplate>
        </DemoToolbar>
    </div>
    <div class="card-body mw-480">
        <DxTagBox Data="@Staff.DataSource"
                  TextFieldName="@nameof(Person.Text)"
                  ValueFieldName="@nameof(Person.Id)"
                  SizeMode="SizeMode"
                  @bind-Values="Values"
                  ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto">
        </DxTagBox>
    </div>
</div>

<CodeSnippet_Editor_TagBox_ValueFieldProperty></CodeSnippet_Editor_TagBox_ValueFieldProperty>

@code {
    IEnumerable<int> Values { get; set; } = Staff.DataSource.Take(2).Select(t => t.Id);

    string GetStringRepresentation() {
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        if (Values != null && Values.Any()) {
            foreach (var value in Values)
                sb.Append(value + ", ");
            sb.Remove(sb.Length - 2, 2);
        }
        return sb.ToString();
    }
}
